import React, { Component } from "react";
import style from "./style.css";
import Style from "./styled";
import { number } from "prop-types";

import classNames from "classnames/bind";
let cx = classNames.bind(style);

class Headers extends Component {
  // 类名classname
  render() {
    return (
      <>
        <header className="header">这是头部</header>
      </>
    );
  }
}
class Concent extends Component {
  // static 静态方法,defaultProps做默认值
  static defaultProps = {
    username: "React",
  };
  static propsTypes = {
    msg: number,
  };
  // 行内样式
  render() {
    return (
      <>
        <h1 style={{ color: "red", fontSize: "30px" }}>
          Hello,{this.props.username}-{this.props.msg}
        </h1>
        {this.props.children.div}
      </>
    );
  }
}
// css in js
class Main extends Component {
  render() {
    return <Style size="30">这是内容部分</Style>;
  }
}
class Footer extends Component {
  state = {
    arr: [1, 2, 3, 4, 5, 6],
  };
  render() {
    // classNames
    let classname = cx({
      // font bg 是类名，如满足后面条件则添加该类名（条件可以省略不写）
      font: 2 < 3,
      bg: 4 > 3,
    });
    const { arr } = this.state;
    return (
      <>
        <p className={classname}>这是底部</p>
        <ul>
          {arr.map((item, index) => (
            <li key={index}>{item}</li>
          ))}
        </ul>
      </>
    );
  }
}
class App extends Component {
  render() {
    return (
      <>
        <Headers />
        <Concent username="张三" msg="12">
          {{ div: "这是插槽部分" }}
        </Concent>
        <Main />
        <Footer></Footer>
      </>
    );
  }
}
export default App;
